<template>
	<view>
		<view class="dis-flex flex-x-end">
			<view @click="goPicker" class="week-picker">
				<u-icon :name="show?'arrow-down':'arrow-right'" :label="show_num" labelPos="left"></u-icon>
			</view>
		</view>
		<view class="flex-between-row" v-for="(item,index) in list" :key="index">
			<view class="flex-1 t-c class-item" :class="'class-item-bgc'+ index % 4 + '0'">{{item.class}}
			</view>
			<view class="flex-1 t-c class-item" :class="'class-item-bgc'+ index % 4 + '1'">{{item.grade_a}}分
			</view>
			<view class="flex-1 t-c class-item col-f" :class="'class-item-bgc'+ index % 4 + '2'">{{item.grade_b}}分
			</view>
		</view>
		<u-picker :defaultIndex="defaultIndex" :closeOnClickOverlay="true" @close="show=false" @cancel="show=false"
			@confirm="goConfirm" :show="show" :columns="columns">
		</u-picker>
	</view>
</template>

<script>
	import {
		getGradeListDetail
	} from '@/api/list.js'
	export default {
		onLoad() {
			this.getGradeList(1)
		},
		onShow() {
			if (!this.$store.getters.userInfo.token) {
				return this.goLogin()
			}
		},
		data() {
			return {
				show: false,
				show_num: '第1学期',
				columns: [
					[]
				],
				defaultIndex: [0],
				timeList: [],
				list: [{
					class: '学科名称',
					grade_a: '期中成绩',
					grade_b: '期末成绩'
				}, ]
			}
		},
		methods: {
			goPicker(type) {
				this.columns = [Array(8).fill(0).map((_, i) => `第${i+1}学期`)]
				this.defaultIndex = [this.show_num.split('')[1] - 1 || 0]
				this.show = true
			},
			goConfirm(e) {
				this.show_num = e.value[0]
				this.getGradeList(e.indexs[0] + 1)
				this.show = false
			},
			async getGradeList(id) {
				const res = await getGradeListDetail(id)
				if (res.code === 200) {
					this.list = res.data
					this.list.unshift({
						class: '学科名称',
						grade_a: '期中成绩',
						grade_b: '期末成绩'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time {
		width: 750rpx;
		height: 138rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.02);
		border-radius: 12rpx 12rpx 0rpx 0rpx;

		&-item {
			width: 108rpx;
			height: 138rpx;
			padding-top: 17rpx;
			border-radius: 12rpx 0rpx 0rpx 12rpx;
			text-align: center;
			color: #8F8E93;

			&-active {
				color: #000;
			}

			&-day {
				margin-top: 19rpx;
			}

			&-ball {
				margin: 4rpx auto 0;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: linear-gradient(180deg, #75F6A1 0%, #50CFE8 71%);
			}
		}
	}

	.week-picker {
		margin: 20rpx;
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.class-item {
		padding: 20rpx;

		&-bgc00 {
			background-color: #9acafc;
		}

		&-bgc01 {
			background-color: #3c9cff;
		}

		&-bgc02 {
			background-color: #398ade;
		}

		&-bgc10 {
			background-color: #f7b2b2;
		}

		&-bgc11 {
			background-color: #f56c6c;
		}

		&-bgc12 {
			background-color: #e45656;
		}

		&-bgc20 {
			background-color: #a9e08f;
		}

		&-bgc21 {
			background-color: #71d5a1;
		}

		&-bgc22 {
			background-color: #19be6b;
		}


		&-bgc30 {
			background-color: #f9d39b;
		}

		&-bgc31 {
			background-color: #f9ae3d;
		}

		&-bgc32 {
			background-color: #f1a532;
		}
	}
</style>
